.functionpanelBox {
  width: 100%;
  height: 170px;
  background: #f1f1f1;
  position: fixed;
  bottom: -25.5%;

  &.slide {
    transition: all 0.5s ease;
    bottom: 0;
  }
}

.panelBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  margin-top: 10px;

  li {
    width: 25%;
    padding: 5px 0px;

    p:nth-child(1) {
      width: 50px;
      height: 50px;
      background: #fff;
      border-radius: 10px;
      margin: 0 auto;

      svg {
        margin-top: 8px;
      }
    }

    p:nth-child(2) {
      padding-top: 3px;
    }
  }
}

// .popupBox{
//   width:100%;
//   height:100%;
//   background: url() rgba(0,0,0,.4);
//   background-repeat: no-repeat;
//   background-position: center center;
//   background-size: cover;
//   background-blend-mode: multiply;
// }
/*背景模糊*/
.popupBox {
  height: 100%;
  width: 100%;
  position: relative;
  background-image:linear-gradient(to right,#000 -600px,#999 300px);
  z-index:10;
  .popupBoxP{
    position:absolute;
    right:0;
    top:0;
    width: 100%;
    height: 100%;
    box-shadow: -5px 0px 130px 25px #000 inset;
    overflow: hidden;
    #videos{
      width:100px;
      height:200px;
      position:fixed;
      top:0;
      right:0;
      background:rgba(0,0,0,.2);
      z-index:100;
      video{
        width:100%;
        height:100%;
        object-fit: cover
      }
    }
  }
  .cover{
    position:absolute;
    right:0;
    top:0;
    width: 100%;
    height: 100%;
    background:rgba(255,255,255,.1);
    padding:10px 5px;
    overflow: hidden;
    header{
      color:#fff;
    }
    main{
      .headImg{
        width:100%;
        height:200px;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .text{
          color:#fff;
          padding: 5px 0px;
          font-size: 13px;
        }
      }
      .footer{
        width: 100%;
        height:100px;
        position:absolute;
        bottom:30px;
        ul{
          width: 100%;
          height:100%;
          display:flex;
          justify-content: space-around;
          li{
            display:flex;
            flex-direction:column ;
            justify-content: center;
            align-items: center;
            p{
              &:nth-child(1){
                width:50px;
                height:50px;
                background:#fff;
                border-radius: 50%;
                display:flex;
                justify-content: center;
                align-items: center;
                .icon{
                  font-size:25px;
                  color:#fff;
                }
              }
              &:nth-child(2){
                color:#e7e7e7;
                padding:5px 0px;
              }
            }
          }
        }
      }
    }
  }
}